<template>
    <div>
        <x-header :left-options="{backText: ''}">兴趣爱好</x-header>
        <div style="padding: 15px 0;margin-left:15px;">
            <div class="box">
                <checker v-model="demo6"
                         type="checkbox" :max="3"
                         default-item-class="demo5-item"
                         selected-item-class="demo5-item-selected">
                    <checker-item v-for="item in items" :value="item">{{item.value}}
                    </checker-item>
                </checker>
                <br>
            </div>
        </div>
        <divider>我是有底线的</divider>
        <box gap="10px 10px">
            <x-button type="primary" @click.native="submit">提交</x-button>
        </box>
        <toast v-model="show" type="text">更新爱好成功~</toast>
    </div>
</template>

<script>
    import {Checker, CheckerItem, XHeader, XButton, Box, Divider, Toast} from 'vux'
    import request from 'superagent'

    export default {
        components: {
            Checker,
            CheckerItem,
            XHeader,
            XButton,
            Box,
            Divider,
            Toast
        },
        data () {
            return {
                items: [{key: 'JYJH', value: '交友聚会'},
                    {key: 'YYXJ', value: '音乐戏剧'},
                    {key: 'TYYD', value: '体育运动'},
                    {key: 'HWLX', value: '户外旅行'},
                    {key: 'JZGY', value: '讲座公益'},
                    {key: 'QT', value: '其他'}],
                demo6: [],
                show: false
            }
        },
        created: function () {
            this.getHobby();
        },
        methods: {
            getHobby() {
                request.get('/wx/hobby/gethobby')
                    .end((err, res) => {
                        console.log(res);
                        if (res.ok) {
                            const result = JSON.parse(res.text).data;
                            if (typeof(result.resMsg) == "undefined") {
                                console.log(JSON.stringify(result.hobbyMaps));
                                this.demo6 = result.hobbyMaps
                            }
                        }
                    });
            },
            submit() {
                request.post('/wx/hobby/updatehobby')
                    .send({
                        hobby: JSON.stringify(this.demo6)
                    })
                    .set('Content-Type', 'application/x-www-form-urlencoded')
                    .end((err, res) => {
                        console.log(res);
                        if (res.ok) {
                            this.show = true;
                            this.getHobby()
                        }
                    });
            },
        }
    }

</script>
<style scoped>
    .box {
        padding: 0 15px;
    }

    .checker-popup {
        background: rgba(255, 255, 255, 0.5);
    }

    .demo5-item {
        width: 100px;
        height: 26px;
        line-height: 26px;
        text-align: center;
        border-radius: 3px;
        border: 1px solid #ccc;
        background-color: #fff;
        margin-right: 6px;
        margin-top: 6px;
    }

    .demo5-item-selected {
        background: #ffffff no-repeat right bottom;
        border-color: #ff4a00;
    }


</style>
